<template>
  <el-dialog v-model="openBoole" :close-on-click-modal="false" :title="title" custom-class="mydialog" width="50%"
             @close="close">
    <el-form ref="openRef" :model="openForm" :rules="rules" label-width="110px" size="small">
      <el-row gutter="40">
        <el-col :span="12">
          <el-form-item label="终端名称" prop="terminalName">
            <el-input v-model="openForm.terminalName" clearable disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地区" prop="terminalName">
            <el-cascader v-model="openForm.region" :options="cityList" :popper-append-to-body="false" :props="{ value:'regionCode',label:'regionName' }"
                         disabled placeholder="请选择地区" style="width:100%"
                         @change="handlCity"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <item-title title="终端产品信息"/>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品通用名" prop="productName">
            <product-popover-id :disabled="!dialogVisible" :searchs="openForm.productName" :terminal-id="id"
                                @confirm="productConfirm">
              <el-input v-model="openForm.productName" :disabled="booleDis" clearable placeholder="请输入产品通用名"
                        @clear="productClear" @input="onInput"/>
            </product-popover-id>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品名" prop="productPopularName">
            <el-input v-model="openForm.productPopularName" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="包装规格" prop="packSpecs">
            <el-input v-model="openForm.packSpecs" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="终端价" prop="terminalPrice">
            <div style="display: flex;justify-content: space-between">
              <div style="width: 80%">
                <app-price-popover ref="pricePop" :props-product="propsProduct" @confirm="priceConfirm">
                  <el-select v-model="openForm.terminalPrice" :disabled="openForm.plaNname !== '' || booleDis"
                             clearable placeholder="请选择终端价" style="width: 100%"
                             @clear="priceClear"
                             @focus="priceFocus">
                    <template #empty/>
                  </el-select>
                </app-price-popover>
              </div>
              <div style="width: 15%;text-align: center">
                元
                <span v-if="openForm.sellUnit"> /{{ getLabel('sell_unit', openForm.sellUnit) }}</span>
              </div>
            </div>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="准入模式" prop="accessMode">
            <el-select v-model="openForm.accessMode" :disabled="openForm.plaNname !== '' || booleDis"
                       placeholder="请选择准入模式" style="width: 100%;">
              <el-option v-for="item in accessMode" :key="item.id" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联招商规划" prop="plaNname">
            <el-input v-model="openForm.plaNname" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <item-title title="代理信息"/>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代理类型" prop="sellMode">
            <el-select v-model="openForm.sellMode" placeholder="请选择代理类型" style="width: 100%" @change="handlChangeName">
              <el-option v-for="item in salesModel.filter(a=>a.value !== 'direct')" :key="item.id" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="openForm.sellMode !== 'direct'" :span="12">
          <el-form-item :label="labelName" prop="agentName">
            <el-autocomplete v-model="openForm.agentName" :fetch-suggestions="querySearchAsyncAgent" :placeholder="placeholder"
                             style="width: 100%" @select="handleSelectAgent">
              <template #default="{ item }">
                <div class="distributeName">
                  <span v-if="openForm.sellMode === 'agent'">{{ item.agentName }}</span>
                  <span v-if="openForm.sellMode === 'agent_person'">{{ item.userName }}</span>
                </div>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交易价" prop="tradePrice">
            <el-input v-if="openForm.sellMode === 'direct'" v-model="openForm.tradePrice" clearable
                      placeholder="请输入交易价">
              <template #append>
                <span>元/盒</span>
              </template>
            </el-input>
            <div v-else style="display: flex;justify-content: space-between">
              <div style="width: 85%">
                <app-trading-popover ref="agentPop" :props-agent="propsAgent" :sell-mode="openForm.sellMode"
                                     @confirm="agentConfirm">
                  <el-select v-model="openForm.tradePrice" :disabled="openForm.agentName === ''" clearable
                             placeholder="请选择交易价" style="width: 100%" @clear="agentClear" @focus="agentFocus">
                    <template #empty/>
                  </el-select>
                </app-trading-popover>
              </div>
              <div style="width: 15%;text-align: center">
                元
                <span v-if="openForm.sellUnit"> /{{ getLabel('sell_unit', openForm.sellUnit) }}</span>
              </div>
            </div>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责营销职员" prop="headId">
            <el-select v-model="openForm.headId" placeholder="请选择营销职员" style="width: 100%" @change="handlChangeHead">
              <el-option v-for="item in headList" :key="item.id" :label="item.realName" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col v-if="agentAttribute === '2'" :span="12">
          <el-form-item label="开发期限截至" prop="expireTime">
            <date-picker v-model:date="openForm.expireTime" :disabled="openForm.plaNname !== '' || booleDis" :disabled-date="disabledDate"
                         placeholder="选择日期" style="width: 100%" type="date"/>
          </el-form-item>
        </el-col>
        <el-col v-if="agentAttribute === '2'" :span="12">
          <el-form-item label="开发保证金" prop="devEarnestMoney">
            <el-input v-model="openForm.devEarnestMoney" :disabled="openForm.plaNname !== '' || booleDis" clearable
                      placeholder="请输入开发保证金"/>
          </el-form-item>
        </el-col>
        <el-col v-if="booleInput" :span="12">
          <el-form-item label="最低销量" prop="minSale">
            <el-input v-model.number="openForm.minSale" :disabled="openForm.plaNname !== '' || booleDis" clearable
                      placeholder="请输入最低销量">
              <template #append>
                <span style="padding-right: 10px">{{ getLabel('sell_unit', openForm.sellUnit) }}/</span>
                <el-select v-model="openForm.minSaleUnit" :disabled="openForm.plaNname !== '' || booleDis"
                           placeholder="请选择" style="width: 80px;">
                  <el-option v-for="item in nuitData" :key="item.id" :label="item.label" :value="item.value"/>
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="booleInput" :span="12">
          <el-form-item label="销量保证金" prop="sellEarnestMoney">
            <el-input v-model="openForm.sellEarnestMoney" :disabled="openForm.plaNname !== '' || booleDis" clearable
                      placeholder="请输入销量保证金"/>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer" style="display:flex;justify-content:center;align-items:center;">
        <el-button class="border-btn" size="small" style="margin-right: 20px;" @click="close">取消
        </el-button>
        <el-button class="main-btn" size="small" type="primary" @click="handlSubmit">提交审核
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {getCurrentInstance, inject, nextTick, onMounted, reactive, toRefs,} from "vue";
import area from "@/utils/area";
import {validateVENum, validateVENumber} from "@/utils/validate";
import {crmStore} from "@CRM/store";

export default {
  name: "Registered",
  props: {
    typeName: {
      type: String,
      default() {
        return "details";
      },
    },
  },
  setup(props, context) {
    const validateNum = (rule, value, callback) => {
      if (value === "" || value === null) {
        callback(new Error("请选择终端价"));
      } else {
        if (validateVENumber(value)) {
          callback(new Error("格式不正确(最多保留两位小数)"));
        } else {
          callback();
        }
      }
    };
    const validateNum1 = (rule, value, callback) => {
      if (value === "" || value === null) {
        callback(new Error("请选择交易价"));
      } else {
        if (data.openForm.sellMode === "direct") {
          if (validateVENumber(value)) {
            callback(new Error("格式不正确(最多保留两位小数)"));
          } else {
            if (value > data.openForm.terminalPrice) {
              callback(new Error("交易价不能大于终端价"));
            } else {
              callback();
            }
          }
        } else {
          callback();
        }
      }
    };
    const validateVal = (rule, value, callback) => {
      if (value === "" || value === null) {
        callback();
      } else {
        if (validateVENum(value)) {
          callback(new Error("格式不正确(正整数)"));
        } else {
          callback();
        }
      }
    };
    const validateVal1 = (rule, value, callback) => {
      if (value === "" || value === null) {
        callback(new Error("请输入开发保证金"));
      } else {
        if (validateVENum(value)) {
          callback(new Error("格式不正确(正整数)"));
        } else {
          callback();
        }
      }
    };

    const api = inject("api");
    const currentInstance = getCurrentInstance();
    var data = reactive({
      openForm: {
        productPopularName: '',
        region: [],
        productId: null, // 产品Id
        productName: "", // 产品name
        approvalNumber: "", // 批准文号
        terminalPrice: "", // 终端价
        tradePrice: "", // 交易价
        packSpecs: "", // 包装规格
        accessMode: "", // 准入模式
        planId: null, // 联的招商计划id
        plaNname: "", // 联的招商计划name
        sellMode: "agent", // 营销模式
        agentId: null, // 代理商名称
        agentName: "", // 代理商名称
        headId: null, // 负责人ID
        headName: "", // 负责人name
        devEarnestMoney: "", // 开发保证金
        minSale: null, // 最低销量
        sellUnit: "",
        minSaleUnit: "1", // 最低销量单位
        sellEarnestMoney: "", // 销量保证金
        expireTime: "", //
        productPriceId: null,
        agentProductId: null,
        provinceCode: "", // 省code
        cityCode: "", // 市code
        areaCode: "", // 区code
        ids: null,
        terminalId: null,
      },
      cityList: area,
      title: "注册终端",
      openBoole: false,
      rules: {
        productName: [
          {required: true, message: "请选择产品名称", trigger: "blur"},
        ],
        agentName: [{required: true, message: "请选择名称", trigger: "blur"}],
        sellEarnestMoney: [{validator: validateVal, trigger: "blur"}],
        devEarnestMoney: [
          {required: true, validator: validateVal1, trigger: "blur"},
        ],
        terminalPrice: [
          {required: true, validator: validateNum, trigger: "blur"},
        ],
        tradePrice: [
          {required: true, validator: validateNum1, trigger: "blur"},
        ],
        expireTime: [
          {required: true, message: "请选择日期", trigger: "blur"},
        ],
        headId: [
          {required: true, message: "请选择负责营销职员", trigger: "change"},
        ],
      },
      openRef: null,
      nuitData: crmStore.getters["dictionary/getDictionary"]["sell_num_unit"],
      salesModel: crmStore.getters["dictionary/getDictionary"]["agentType"],
      accessMode: crmStore.getters["dictionary/getDictionary"]["access_mode"],
      productList: [],
      id: "",
      headList: [],
      palnList: [],
      pricePop: null,
      propsProduct: {
        terminalType: "",
        productId: 0,
        region: [],
        terminalId: 0,
      },
      propsAgent: {
        terminalId: 0,
        productId: 0,
        agentId: 0,
      },
      agentPop: null,
      booleDis: false,
      labelName: "代理商名称",
      placeholder: "请输入代理商名称",
      dialogVisible: false,
      agentAttribute: "2",
      booleInput: true,
    });

    const disabledDate = (date) => {
      // disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
      return date.getTime() <= Date.now() - 8.64e6;
    };

    // 地区事件
    const handlCity = (val) => {
      if (val) {
        data.openForm.provinceCode = val[0];
        data.openForm.cityCode = val[1];
        data.openForm.areaCode = val[2];
      }
    };

    // 获取产品名称列表
    const querySearchAsyncProduct = async (queryString, cb) => {
      const a = {
        id: data.id,
        keyWord: queryString,
      };
      let results = [];
      const res = await api.terminal.REGISTERED_TERMINAL_PRODUCT(a);
      if (res.code === 0) {
        results = res.data.list || [];
      }
      cb(results);
    };

    // 产品名称事件
    const handleSelectProduct = (val) => {
      data.openForm.productId = val.id;
      data.openForm.productName = val.productPopularName;
      data.openForm.approvalNumber = val.approvalNumber;
      data.openForm.packSpecs = val.packSpecs;
      data.propsProduct.productId = val.id;
      data.propsProduct.terminalId = data.id;
      data.propsAgent.productId = val.id;
      const a = {
        terminalId: data.id,
        productId: val.id,
      };
      handlPlan(a);
    };

    const productConfirm = (val) => {
      data.openRef.clearValidate();
      data.openRef.resetFields();
      data.openForm.productId = val.id;
      data.openForm.productName = val.productPopularName;
      data.openForm.productPopularName = val.productName
      data.openForm.approvalNumber = val.approvalNumber;
      data.openForm.sellUnit = val.sellUnit;
      data.openForm.packSpecs = val.packSpecs;
      data.propsProduct.productId = val.id;
      data.propsProduct.terminalId = data.id;
      data.propsAgent.productId = val.id;
      data.openForm.terminalPrice = "";
      const a = {
        terminalId: data.id,
        productId: val.id,
      };
      handlPlan(a);
    };

    const onInput = () => {
    };

    const productClear = () => {
      data.openForm.productId = 0;
      data.openForm.productName = "";
      data.openForm.approvalNumber = "";
      data.openForm.packSpecs = "";
      data.propsProduct.productId = 0;
      data.propsProduct.terminalId = data.id;
      data.propsAgent.productId = 0;
      const a = {
        terminalId: data.id,
        productId: 0,
      };
      handlPlan(a);
    };

    // 终端价
    const priceConfirm = (val) => {
      data.openForm.productPriceId = val?.id;
      data.openForm.terminalPrice = Number(val.terminalPrice);
      data.openForm.accessMode = val.accessMode;
    };

    // 打开终端价弹框
    const priceFocus = (val) => {
      if (val) {
        data.pricePop.openPopover();
      }
    };

    // 取消终端价弹框
    const priceClear = () => {
      data.openForm.terminalPrice = "";
    };

    // 关联招商计划
    const handlPlan = (val) => {
      api.terminal.REGISTERED_TERMINAL_PLAN(val).then((res) => {
        if (res.code === 0) {
          data.palnList = res.data.list;
          if (data.palnList.length > 0) {
            data.openForm.plaNname = data.palnList[0].planName;
            data.openForm.planId = data.palnList[0].planId;
            data.openForm.ids = data.palnList[0].id;
            data.openForm.expireTime = data.palnList[0].expireTime;
            data.openForm.devEarnestMoney = data.palnList[0].devEarnestMoney;
            data.openForm.minSale =
                data.palnList[0].minSale === 0 ? null : data.palnList[0].minSale;
            data.openForm.minSaleUnit = data.palnList[0].minSaleUnit;
            data.openForm.sellEarnestMoney =
                data.palnList[0].sellEarnestMoney === 0
                    ? ""
                    : data.palnList[0].sellEarnestMoney;
            data.openForm.accessMode = data.palnList[0].accessMode;
            data.openForm.terminalPrice = data.palnList[0].terminalPrice;
          }
        }
      });
    };

    // 获取代理商列表
    const querySearchAsyncAgent = async (queryString, cb) => {
      const a = {
        // terminalId: data.openForm.terminalId,
        // productId: data.openForm.productId,
        agentType: data.openForm.sellMode,
        keyWord: queryString,
      };
      let results = [];
      const res = await api.terminal.REGISTERED_TERMINAL_CHANNEL(a);
      if (res.code === 0) {
        results = res.data.list || [];
      }
      cb(results);
    };

    const handlChangeName = (val) => {
      data.openForm.sellMode = val;
      if (data.openForm.sellMode === "agent") {
        data.labelName = "代理商名称";
        data.placeholder = "请输入代理商名称";
      }
      if (data.openForm.sellMode === "agent_person") {
        data.labelName = "兼职名称";
        data.placeholder = "请输入兼职名称";
      }

      nextTick((_) => {
        data.openRef.clearValidate("tradePrice");
        if (data.openForm.sellMode === "direct") {
          data.openForm.tradePrice = Number(data.openForm.terminalPrice);
        } else {
          data.openForm.tradePrice = "";
        }
      });
    };

    // 代理商事件
    const handleSelectAgent = (val) => {
      if (data.openForm.sellMode === "agent") {
        data.openForm.agentId = val.id;
        data.openForm.agentName = val.agentName;
        data.propsAgent.agentId = val.id;
        data.openForm.tradePrice = "";
      }
      if (data.openForm.sellMode === "agent_person") {
        data.openForm.agentId = val.id;
        data.openForm.agentName = val.userName;
        data.propsAgent.agentId = val.id;
      }
    };

    // 交易价
    const agentConfirm = (val) => {
      data.openForm.agentProductId = val.id;
      data.openForm.tradePrice = Number(val.tradePrice);
      data.openForm.headId = val.headId;
      data.openForm.headName = val.headName;
      data.agentAttribute = val.agentAttribute;
    };

    // 打开交易价弹框
    const agentFocus = (val) => {
      if (val) {
        data.agentPop.openPopover();
      }
    };

    // 取消交易价弹框
    const agentClear = () => {
      data.openForm.tradePrice = "";
    };

    // 获取负责人
    const handlHead = () => {
      api.terminal.HEAD_PEOPLE(1).then((res) => {
        if (res.code === 0) {
          data.headList = res.data;
        }
      });
    };

    // 负责人事件
    const handlChangeHead = (val) => {
      const index = data.headList.findIndex((a) => a.id === val);
      if (index !== -1) {
        data.openForm.headName = data.headList[index].realName;
      }
    };

    // 关闭弹框
    const close = () => {
      data.openBoole = false;
      data.dialogVisible = false;
      remove();
    };

    // 清除弹框
    const remove = () => {
      data.openRef.clearValidate();
      data.openRef.resetFields();
      data.openForm.sellUnit = "";
      data.agentAttribute = "2";
      data.booleDis = false;
      data.labelName = "代理商名称";
      data.placeholder = "请输入代理商名称";
      data.dialogVisible = false;
    };

    const handlClear = () => {
      data.openForm = {
        productPopularName: '',
        region: [],
        productId: null, // 产品Id
        productName: "", // 产品name
        approvalNumber: "", // 批准文号
        terminalPrice: "", // 终端价
        tradePrice: "", // 交易价
        packSpecs: "", // 包装规格
        accessMode: "", // 准入模式
        planId: null, // 联的招商计划id
        plaNname: "", // 联的招商计划name
        sellMode: "agent", // 营销模式
        agentId: null, // 代理商名称
        agentName: "", // 代理商名称
        headId: null, // 负责人ID
        headName: "", // 负责人name
        devEarnestMoney: "", // 开发保证金
        minSale: null, // 最低销量
        sellUnit: "",
        minSaleUnit: "1", // 最低销量单位
        sellEarnestMoney: "", // 销量保证金
        expireTime: "", //
        productPriceId: null,
        agentProductId: null,
        provinceCode: "", // 省code
        cityCode: "", // 市code
        areaCode: "", // 区code
        ids: null,
        terminalId: null,
      };
    };

    // 打开弹框
    const open = (val, value, num, boole) => {
      if (boole) {
        data.booleInput = boole;
      }
      handlClear();
      handlHead()
      data.agentAttribute = "2";
      data.dialogVisible = true;
      if (value) {
        data.title = "编辑终端";
        for (const key in data.openForm) {
          data.openForm[key] = value[key];
        }
        if (data.openForm.sellMode === "agent_person") {
          data.openForm.agentName = value?.agentDetail?.userName;
        }
      } else {
        data.title = "注册终端";
      }
      if (val) {
        data.id = val.id;
        data.openForm.terminalId = val.id;
        data.openForm.region = [val.provinceCode, val.cityCode, val.areaCode];
        data.openForm.terminalName = val.terminalName;
        data.propsProduct.terminalType = val.terminalType;
        data.propsAgent.terminalId = val.id;
        const index1 = data.cityList.findIndex(
            (a) => a.regionCode === val.provinceCode
        );
        if (index1 !== -1) {
          const index2 = data.cityList[index1].children.findIndex(
              (b) => b.regionCode === val.cityCode
          );
          if (index2 !== -1) {
            const index3 = data.cityList[index1].children[
                index2
                ].children.findIndex((c) => c.regionCode === val.areaCode);
            if (index3 !== -1) {
              data.propsProduct.region = [
                data.cityList[index1].children[index2].children[index3],
              ];
            }
          }
        }
      }
      if (num === 1) {
        data.booleDis = true;
        // 产品信息
        data.openForm.productName = val.productPopularName;
        data.openForm.productPopularName = val.productName;
        data.openForm.approvalNumber = val.approvalNumber;
        data.openForm.packSpecs = val.packSpecs;
        data.openForm.productId = val.productId;
        data.propsProduct.productId = val.productId;
        data.openForm.terminalPrice = Number(val.terminalPrice);
        data.openForm.accessMode = val.accessMode;
        data.propsAgent.terminalId = val.terminalId;
        data.propsAgent.productId = val.productId;
        data.openForm.terminalId = val.terminalId;

        console.log(val, ":--------rewrwerwer-------");
        // 招商计划
        data.openForm.plaNname = val.planName;
        data.openForm.planId = val.planId;
        data.openForm.ids = val.id;
        data.openForm.expireTime = val.expireTime;
        data.openForm.devEarnestMoney = val.devEarnestMoney;
        data.openForm.minSale = val.minSale;
        data.openForm.minSaleUnit = val.minSaleUnit;
        data.openForm.sellEarnestMoney =
            val.sellEarnestMoney === 0 ? "" : val.sellEarnestMoney;
        data.openForm.sellMode = val.sellMode;
        data.openForm.terminalPrice = Number(val.terminalPrice);
        data.openForm.sellUnit = val.sellUnit;
      }
      data.openBoole = true;
    };

    // 提交表单
    const handlSubmit = () => {
      data.openRef.validate((valid) => {
        if (valid) {
          let formList = {};
          if (data.openForm.ids !== null) {
            formList = {
              agentProductId: Number(data.openForm.agentProductId) || 0,
              headName: data.openForm.headName || "", // string
              headId: Number(data.openForm.headId) || 0, //	number负责人id
              terminals: [
                {
                  id: Number(data.openForm.ids),
                  expireTime: data.openForm.expireTime || null,
                  devEarnestMoney: Number(data.openForm.devEarnestMoney) || 0,
                  sellEarnestMoney: Number(data.openForm.sellEarnestMoney) || 0,
                  minSale: Number(data.openForm.minSale) || 0, // 必须
                  minSaleUnit: data.openForm.minSaleUnit || "", // string
                  terminalId: Number(data.openForm.terminalId),
                  terminalName: data.openForm.terminalName,
                  terminalPrice: Number(data.openForm.terminalPrice),
                  productPriceId: Number(data.openForm.productPriceId),
                  sellMode: data.openForm.sellMode,
                  productId: data.openForm.productId,
                  tradePrice: Number(data.openForm.tradePrice),
                },
              ],
            };
          } else {
            formList = {
              agentProductId: Number(data.openForm.agentProductId) || 0,
              headName: data.openForm.headName || "", // string
              headId: Number(data.openForm.headId) || 0, //	number负责人id
              terminals: [
                {
                  expireTime: data.openForm.expireTime || null,
                  devEarnestMoney: Number(data.openForm.devEarnestMoney) || 0,
                  sellEarnestMoney: Number(data.openForm.sellEarnestMoney) || 0,
                  minSale: Number(data.openForm.minSale) || 0, // 必须
                  minSaleUnit: data.openForm.minSaleUnit || "", // string
                  terminalId: Number(data.openForm.terminalId),
                  terminalName: data.openForm.terminalName,
                  terminalPrice: Number(data.openForm.terminalPrice),
                  productPriceId: Number(data.openForm.productPriceId),
                  sellMode: data.openForm.sellMode,
                  productId: data.openForm.productId,
                  tradePrice: Number(data.openForm.tradePrice),
                },
              ],
            };
          }
          handlsubForm(formList);
        }
      });
    };

    const handlsubForm = (data) => {
      api.terminal.REGISTERED_TERMINAL_SUBMIT(data).then((res) => {
        if (res.code === 0) {
          currentInstance.proxy.customMessage({
            type: "success",
            message: "终端注册成功",
          });
          context.emit("succsessReg");
          close();
        } else {
          currentInstance.proxy.customMessage({
            type: "error",
            message: res.msg,
          });
        }
      });
    };

    onMounted((_) => {
      handlHead();
    });

    return {
      ...toRefs(data),

      querySearchAsyncProduct,
      handleSelectProduct,
      querySearchAsyncAgent,
      handleSelectAgent,
      handlPlan,
      handlHead,
      handlChangeHead,
      close,
      remove,
      open,
      handlSubmit,
      handlCity,
      handlsubForm,
      priceConfirm,
      priceFocus,
      priceClear,
      agentConfirm,
      agentFocus,
      agentClear,
      handlChangeName,
      productConfirm,
      onInput,
      productClear,
      disabledDate,
      handlClear,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
.col_title {
  height: 36px;
  width: 100%;
  line-height: 36px;
  background: rgb(248, 248, 248);
  padding-left: 10px;
  box-sizing: border-box;
}

:deep(.el-input__inner) {
  background-color: #fff;
}
</style>
